<template>
  <view class="retailArea">
    <classifyHead title="零售区" />
    <view class="content">
      <view class="head">
        <view style="color: aliceblue; margin-left: 40rpx"
          >可使用<text style="color: gold">竞购</text>积分</view
        >
        <image src="../../static/deatil.png" mode="scaleToFill" />
        <view class="score">100000.00</view>
      </view>
      <view class="head">
        <view style="color: aliceblue; margin-left: 40rpx"
          >可使用<text style="color: gold">活动</text>积分</view
        >
        <image src="../../static/deatil.png" mode="scaleToFill" />
        <view class="score">100000.00</view>
      </view>
      <view class="mall">
        <view class="mall-top">
          <view class="mall-pic">
            <image src="../../static/mall.png" mode="scaleToFill" />
            <view class="pre-sale">预售</view>
          </view>
          <view class="mall-right">
            <view
              >Special
              轻奢复古白月光手镯女士镯子饰品外出高级感2025年欧美风</view
            >
            <view class="scoreAdd">
              <view class="add">
                <view style="color: red">+</view>
                <view style="font-weight: 500; font-size: 60rpx">[</view>
              </view>
              <view>
                <view>竞购积分: 500</view>
                <view>活动积分: 500</view>
              </view>
            </view>
            <view class="count">
              <view>数量：{{ count }}</view>
              <view class="count-btn">
                <button>-</button>
                <button class="number">{{ count }}</button>
                <button>+</button>
              </view>
            </view>
          </view>
        </view>
         <view class="mall-bottom">
          <view style="color: red; margin-left: 40rpx">额外获得</view>
          <view class="other-score">
            <view>收益额度:
              <text style="margin-left: 120rpx; text-align: left">+10000</text>
            </view>
          </view>
        </view>
        <button class="mall-btn">购买</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import classifyHead from "@/components/classifyHead.vue";
import { ref } from "vue";
const count = ref(1);
</script>

<style lang="scss" scoped>
.retailArea {
  .content {
    padding: 0 20rpx;
    .head {
      margin-top: 20rpx;
      width: 100%;
      height: 142rpx;
      background: #394bd5;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      image {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-left: 20rpx;
      }
      .score {
        width: 200rpx;
        color: aliceblue;
        font-size: 36rpx;
        text-align: right;
      }
      .btn {
        width: 147rpx;
        height: 64rpx;
        border-radius: 50rpx;
        background: orange;
        display: flex;
        justify-content: center;
        align-items: center;
        color: aliceblue;
      }
    }
    .mall {
      margin-top: 40rpx;
      box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
      width: 675rpx;
      height: 500rpx;
      border-radius: 20rpx;
      padding: 0 20rpx;

      .mall-top {
        display: flex;
        padding-bottom: 20rpx;
        border-bottom: 1px dashed black;
        .mall-pic {
          position: relative;
          image {
            width: 238rpx;
            height: 238rpx;
            border-radius: 20rpx;
            margin-top: 20rpx;
          }
          .pre-sale {
            width: 75rpx;
            height: 43rpx;
            line-height: 43rpx;
            text-align: center;
            background: rgb(35, 191, 95);
            color: #ece8e8;
            border-top-right-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
            position: absolute;
            top: 180rpx;
            left: 0;
            font-size: 26rpx;
          }
        }
        .mall-right {
          flex: 1;
          margin-left: 20rpx;
          margin-top: 20rpx;
          color: black;
          font-weight: 500;
          .scoreAdd {
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            .add {
              display: flex;
              align-items: center;
            }
          }
          .count {
            display: flex;
            justify-content: space-between;
            margin-top: 10rpx;
            .count-btn {
              display: flex;
              button {
                width: 40rpx;
                height: 40rpx;
                background: #ece8e8;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 0rpx;
              }
              .number {
                width: 80rpx;
                height: 40rpx;
                background: #ece8e8;
                border-radius: 0rpx;
                margin: 0 10rpx;
                font-size: 20rpx;
              }
            }
          }
        }
      }
            .mall-bottom {
        display: flex;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: 1px dashed black;
        .other-score {
          margin-left: 50rpx;
        }
      }
      .mall-btn {
        background: red;
        margin-top: 20rpx;
        width: 200rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        border-radius: 0rpx;
        margin-left: 473rpx;
      }
    }
  }
}
</style>
